<script setup>
import content from './aa'
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
import Toast from '@vant/weapp/dist/toast/toast';
import { analysisQuest, editImgUpload, getImageByTaskId } from '@/api/painting'

import { marked } from 'marked'

import { ref, computed } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';


// 页面携带参数
const queryItem = ref({})
// 页面携带参数
const queryData = ref({
    model: 'DOUBAO',
})
// 页面详细信息
const queryInfo = ref({})

// 任务Id
const taskId = ref('')
let timer = null

// 段落展位宽度
const skeletonRowWidthList = ['30%', '20%', '50%', '90%', '40%', '60%', '10%', '100%', '80%', '40%', '60%', '20%', '30%']
// loading状态
const skeletonLoading = ref(true)

// 在拍一题
function startFn() {
    uni.navigateBack({
        delta: 2
    })
}

// 解析Markdown和LaTeX的方法
function parseMarkdownAndLatex(content) {
    if (!content) return '';
    content = content.replace(/\↵/g, '\n');
    content = content.replace(/\\/g, '\\\\');

    console.log(content);

    return `$$${content}$$`
}



// 获取任务状态
async function getImageByTaskIdFn() {
    const res = await getImageByTaskId(taskId.value)

    if (res.data.state === 1) {
        debugger;
        clearInterval(timer);
        // res.data.promptContent = marked.parse(res.data.promptContent)
        console.log(parseMarkdownAndLatex(res.data.promptContent), 'parseMarkdownAndLatex(res.data.promptContent)');

        res.data.promptContent = parseMarkdownAndLatex(res.data.promptContent)
        queryInfo.value = res.data
        Toast.clear()
        skeletonLoading.value = false
    } else if (![3, 4].includes(res.data.state)) {
        clearInterval(timer);
        const errorMessage = res.data?.remark.split('失败原因：')[1]
        Toast.fail(errorMessage);
    }
}


// 发起鑫鑫爱学任务
async function analysisQuestFn() {
    try {
        const res = await analysisQuest(queryData.value)
        taskId.value = res.data.taskId
        timer = setInterval(() => {
            getImageByTaskIdFn()
        }, 5000);

    } catch (error) {
        Toast.clear()
    }
}

// 上传原图
async function editImgUploadFn() {
    return new Promise(async (resolve, reject) => {
        try {
            const res = await editImgUpload({
                type: 27,
                orgImg: queryItem.value.imageFileUrl
            })
            queryData.value.baseImageUrl = res.orgImgUrl
            resolve()
        } catch (error) {
            Toast.clear()
            reject()
        }
    })
}

// 预览图片
function previewImage() {
    uni.previewImage({
        urls: [queryItem.value.imageFileUrl],
        current: queryItem.value.imageFileUrl,
    })
}


onLoad(async (e) => {
    // Toast.loading({
    //     message: '解答中...',
    //     duration: 0,
    //     // forbidClick: true,
    // })

    skeletonLoading.value = false
    console.log(parseMarkdownAndLatex('↵↵### 步骤一：构造等边三角形↵以\\(AC\\)为边，\\left(x-1\\right)\\left(x+3\\right) '), '123131312');

    queryInfo.value = {
        // promptContent: parseMarkdownAndLatex('↵↵### 步骤一：构造等边三角形↵以\\(AC\\)为边，在\\(\\triangle ACD\)外作等边\\(\\triangle ACE\\)，连接\\(DE\\)。,\\left(x-1\\right)\\left(x+3\\right)')
        promptContent: parseMarkdownAndLatex('↵↵### 步骤一 \\left(x-1\\right)\\left(x+3\\right)')
    }
    // if (e.data) {
    //     queryItem.value = JSON.parse(e.data)
    // }
    // await editImgUploadFn()
    // analysisQuestFn()
})

const tagStyle = {
    pre: ``
}
</script>

<template>
    <div class='takePhotosAnswerDetail'>
        <NavBar>{{ queryItem?.title }}</NavBar>
        <div class="container">
            <img :src="queryItem?.imageFileUrl" class="imgSty" mode="aspectFill" alt="" @click="previewImage" />
            <div class="content">
                <div class="title">AI解答</div>
                <van-skeleton title row="13" :row-width="skeletonRowWidthList" :loading="skeletonLoading">
                    <div class="text">
                        <mp-html :content="queryInfo?.promptContent" markdown></mp-html>
                        <!-- <mp-html :content="queryInfo?.promptContent" markdown plugin="highlight"
                        :tag-style="tagStyle"></mp-html> -->
                    </div>
                </van-skeleton>
            </div>
        </div>
        <div class="footer" v-if="!skeletonLoading">
            <div class="footer_placeholder"></div>
            <div class="footer_content">
                <myDrawButton :labelShow="false" @click="startFn">再拍一题</myDrawButton>
            </div>
        </div>
    </div>
    <van-toast id="van-toast" />
</template>

<style lang='scss' scoped>
::v-deep {
    .van-skeleton__row {
        background: var(--a-main-box-bg-color) !important;
    }

    .van-skeleton__title {
        background: var(--a-main-box-bg-color) !important;
    }
}

.takePhotosAnswerDetail {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .container {
        flex: 1;
        padding: 30rpx;
        overflow: scroll;

        .imgSty {
            width: 100%;
            height: 300rpx;
        }

        .content {
            margin-top: 30rpx;

            .title {
                font-weight: bold;
                font-size: 36rpx;
                color: #FEFEFF;
            }

            .text {
                font-size: 30rpx;
                color: #FFFFFF;
                margin-top: 17rpx;
                line-height: 45rpx;
                text-align: justify;
            }
        }
    }

    .footer {
        .footer_placeholder {
            height: 176rpx;
        }

        .footer_content {
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 176rpx;
            background: var(--a-main-tabNav-bg-color);
            padding: 28rpx 30rpx 0;
        }
    }
}
</style>